<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" th:href="@{/img/logo.ico}" href="../../static/img/logo.ico" type="images/x-ico"/>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/css/login.css}" href="../../static/css/login.css">
    <link rel="stylesheet" th:href="@{/fontawesome/css/font-awesome.min.css}"
          href="../../static/fontawesome/css/font-awesome.min.css">

    <style type="text/css">
        /*手机端*/
        @media only screen and (max-width: 768px) {
            .bigbox {
                width: 350px;
                margin-left: 0;
            }

            .formbox {
                background-color: white;
                box-shadow: 10px 10px 5px #888888;
                border-radius: 5px;
            }

        }
    </style>
</head>
<body>
<div style="min-height: 85%">
    <div class="container">
        <div class="bigbox">
            <div class="myfont">
                <h3>软件学院学生信息管理系统</h3>
            </div>
            <div class="formbox">
                <h3>根据您的账号进行登录</h3>
                <table>
                    <tr>
                        <td>
                            <i class="fa fa-user"></i>
                        </td>
                        <td>
                            <input type="text" class="form-control" id="username" placeholder="账号(学号或工号)"
                                   name="username">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <i class="fa fa-lock"></i>
                        </td>
                        <td>
                            <input type="password" class="form-control password" id="password"
                                   placeholder="密码(默认123456)" name="password">
                        </td>
                    </tr>
                </table>
                <div class="form-actions">
                    <button type="submit" class="btn btn-bricky pull-right login" id="login">
                        登录
                        <i class="fa fa-arrow-circle-right"></i>
                    </button>
                </div>
                <span id="msg" hidden></span>
            </div>
        </div>
    </div>
</div>
<div class="copyright">
    2020 &copy; 软件学院学生信息管理系统 by 郑焙元<br>
</div>
<script src="../static/js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script src="../../static/js/bootstrap.min.js" th:src="@{js/bootstrap.min.js}"></script>

<script>
    //全局触发方法   keycode为按的键盘的key值
    $('body').keydown(function (event) {
        if (event.keyCode === 13) {
            $('#login').click();
        }
    });

    $('#login').click(function () {

        var username = $('#username').val();
        var password = $('#password').val();

        if (username === '' || password === '') {
            $('#msg').html('登录名或密码不能为空。').removeAttr('hidden');
            return false;
        }

        $.ajax({
            url: '/login',
            type: 'post',
            data: {
                username: username,
                password: password
            },
            success: function (res) {
                if (res.code === 0) {
                    window.location.href = res.data;
                } else {
                    $('#msg').html('登录名或密码错误。').removeAttr('hidden');
                }
            },
            beforeSend: function () {
                $('#login').attr({disabled: 'disabled'});
            },
            complete: function () {
                $('#login').removeAttr('disabled');
            },
            error: function (e) {
                alert('系统异常。');
            }
        })
    });

</script>

</body>
</html>
